<%@ page contentType="text/html;charset=UTF-8" %>
<div id="dict">
  <el-row type="flex" class="row-info-bottom" justify="end">
    <el-col :span="2">
      <el-button type="warning" class="btn-width-100" @click="handleAdd">新增数据字典</el-button>
    </el-col>
  </el-row>
  <el-table
      v-loading="loadingFlag"
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        width="50">
    </el-table-column>
    <el-table-column
        prop="name"
        label="名称">
    </el-table-column>
    <el-table-column
        prop="code"
        label="code">
    </el-table-column>
    <el-table-column
        prop="typeDescribe"
        label="类型解释">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="update(scope.$index)" type="primary" size="small">修改</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination class="pagination"
                 layout="prev, pager, next"
                 :total="${totalRecords}"
                 @current-change="fetchDicts"
  >
  </el-pagination>
  <el-dialog title="新增/修改数据字典" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form>
      <el-form-item label="code">
        <el-input v-model="dictData.code" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="dictData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="dictData.type" placeholder="请选择">
          <el-option
              v-for="(value, key) in options"
              :key="key"
              :label="value"
              :value="key">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" :loading="dialogBtnLoading">取消</el-button>
      <el-button type="primary" @click="submit" :loading="dialogBtnLoading">确定</el-button>
    </div>
  </el-dialog>
</div>
<script type="text/javascript">
  var dictVue = new Vue({
    el: "#dict",
    mounted: function () {
      this.fetchDicts(1); //
      http.post("${basePath}emp/sys/dict/find_type", {})
        .then(function (res) {
          dictVue.options = res.data;
        })
    },
    data: function () {
      return {
        options: [],
        tableData: [],
        loadingFlag: true,
        dictData: {ordNo: "", name: "", code: "", type: "", typeDescribe: ""},
        dialogBtnLoading: false,
        dialogVisible: false
      }
    },
    methods: {
      fetchDicts: function (p) {
        http.get("${basePath}emp/sys/dict/list", {params: {p: p - 1, max: 10}})
          .then(function (res) {
            dictVue.tableData = res.data;
            dictVue.loadingFlag = false;
          })
      },

      handleAdd: function () {
        this.dialogVisible = true;
        this.dictData = {name: "", code: "", type: "", typeDescribe: ""};
      },
      submit: function () {
        this.dialogBtnLoading = true;
        http.post("${basePath}emp/sys/dict/save_update", this.dictData)
          .then(function (res) {
            dictVue.$message({showClose: true, message: '保存成功', type: 'success'});
            dictVue.dialogVisible = false;
            dictVue.dialogBtnLoading = false;
            dictVue.fetchDicts(1);
          }).catch(function (error) {
            dictVue.dialogBtnLoading = false;
          });
      },
      update: function (ordNos) {
        this.dictData = this.tableData[ordNos];
        delete this.dictData.createDate;
        delete this.dictData.updateDate;
        this.dialogVisible = true;
      }
    }

  })
</script>